import styled from '@emotion/styled';
import { ButtonNoPadding, Row } from 'components/lib';
import { useAuth } from 'context/auth-context';
import { ProjectListScreen } from 'screens/project-list';
import { ReactComponent as SoftwareLogo } from 'assets/software-logo.svg';
import { Button, Dropdown, Menu } from 'antd';
import { Navigate, Route, Routes } from 'react-router';
import { ProjecScreen } from 'screens/projec/idnex';
import { resetRoute } from 'utils';
import { useState } from 'react';
import { ProjectModal } from 'screens/project-list/projectModal';
import { ProjectPopover } from 'components/project-popover';
export const AuthenticatedApp = () => {
  // const [projectModalOpen, setProjectModalOpen] = useState(false);
  return (
    <Container>
      <PageHeader/>
      <Main>
        <Routes>
          <Route
            path={'/projects'}
            element={
              <ProjectListScreen/>
            }
          ></Route>
          <Route path={'/projects/:id/*'} element={<ProjecScreen />}></Route>
          <Route path="*" element={<Navigate to={'/projects'}></Navigate>} />
        </Routes>
      </Main>
      <ProjectModal/>
    </Container>
  );
};
const PageHeader = () => {
  return (
    <Header between={true}>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type={'link'} onClick={resetRoute}>
          <SoftwareLogo width={'18rem'} color={'rgb(38,132,255)'} />
        </ButtonNoPadding>
        <ProjectPopover />
        {/* <span>项目</span> */}
        <span>用户</span>
      </HeaderLeft>
      <HeaderRight>
        <User />
      </HeaderRight>
    </Header>
  );
};
const User = () => {
  const { logout, user } = useAuth();
  return (
    <Dropdown
      overlay={
        <Menu>
          <Menu.Item key={'logout'}>
            <Button type={'link'} onClick={logout}>
              登出
            </Button>
          </Menu.Item>
        </Menu>
      }
    >
      <Button onClick={(e) => e.preventDefault()} type={'link'}>
        Hi,{user?.name}
      </Button>
    </Dropdown>
  );
};
const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  height: 100vh;
`;
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)`
  display: flex;
  align-items: center;
`;
const HeaderRight = styled.div``;
const Main = styled.main``;
function setStat(arg0: boolean): [any, any] {
  throw new Error('Function not implemented.');
}
